<template>
	<view style="background-color: #f8f8f8;min-height: 100%;padding-bottom: 200rpx;">
		<!-- 顶部栏位 -->
		<fui-nav-bar  isFixed isOccupy custom>
			<sn-header :pageUrl="'/pages/sale/index'"></sn-header>
			<view v-if="!dropDown" class="u-flex u-row-between" style="position: absolute;right: 35rpx;z-index: 99;">
				<view  @click.stop="$mRouter.push({ route: '/pages/sale/shezhi/index?id='+storeShop.id })">
					<image src="/static/home/icon_shezhi.png" class="header-icon" mode=""></image>
				</view>
				<!-- <header-xiaoxi :number="2"  class="u-m-r-30" ></header-xiaoxi> -->
			</view>
		</fui-nav-bar>
		<!-- charts区域 -->
		<view class="chart bottom-speac box-padding" style="position: relative;">
			<view class="chart-header">
				<view class="tabs" :class="0 == current ? 'active' : ''" @click="clickTabs(0)">销售额月度走势</view>
				<view class="tabs" :class="1 == current ? 'active' : ''" @click="clickTabs(1)">推荐单品月度走势</view>
			</view>
			<charts :data="salesData" :current="current"  v-if="current == 0"/>
			<charts :data="productData"  :current="current"  v-if="current == 1"/>
			<view v-show="current == 0" style="position: absolute;bottom: 100rpx;">
				<text style="font-size: 18rpx;color: #999999;">({{salesData.unit}})</text>
			</view>
			<view v-show="current == 1&&productData.unit!==''" style="position: absolute;bottom: 100rpx;">
				<text style="font-size: 18rpx;color: #999999;">({{productData.unit}})</text>
			</view> 
		</view>
		<!-- 我的采购 -->
		<view class="bottom-speac box-color box-padding" v-if="showMenuList.length !==0">
			<view class="u-flex u-row-between u-m-b-50" v-if="this.isSale">
				<view style="font-weight: 1000;color: #333333;font-size: 32rpx;">销售订单</view>
				<view style="color: #999999;font-size: 26rpx;" @tap="$mRouter.push({ route: '/pages/sale/order/index' })" >全部订单</view>
			</view>
			<view :class="['u-flex',{'u-m-t-50':!this.isSale}]" style="flex-wrap: wrap;">
				<view class="menu-item" v-for="(item,index) in showMenuList" :key="index"  @tap="$mRouter.push({ route:item.route})">
					<view class="menu-item-image">
						 <fui-badge :value="item.badge" type="danger" absolute	right="10rpx"></fui-badge>
						<!-- <u-badge type="error" :count="item.badge" :offset="[-10, 35]" :bgColor="badgeColor"></u-badge> -->
						<img style="width: 50%;" :src="item.image"></img>
					</view>
					<view class="menu-item-text">{{item.name}}</view>
				</view>
			</view>
		</view>
		<view v-else style="height: 500rpx;flex-direction: column;" class="u-flex u-row-center" >
			<image src="/static/mendian/shoouhou_kong.png" mode="widthFix" style="width: 500rpx;"></image>
			<view style="color: #ff551a;">您没有任何销售权限~</view>
		</view>
		<!--页面加载动画-->
		<!-- <akLoading isFullScreen :active="loading"></akLoading> -->
		<!-- tabbar -->
		<fui-tabbar :isFixed="true" ></fui-tabbar>
		<!-- <u-tabbar :height="100" :key="reloadKey" :list="tabbar" :active-color="textColor" :inactive-color="textColor"></u-tabbar> -->
		<!-- <u-no-network></u-no-network> -->
	</view>
</template>

<script>
	// import HeaderXiaoxi from '@/components/header-xiaoxi/index.vue'
	import {useUserStore} from '@/store/user.js';
	import {useShopStore} from '@/store/shop.js';
	import { mapState } from 'pinia';
	import Charts from './echarts/index.vue'
	import SnHeader from '@/components/sn-header.vue'
	export default {
		components: { SnHeader,Charts },
		data() {
			return {
				fillHeight: 87,
				balance: 0,
				coupon: 0,
				badgeQuantity: {},
				dropDown: false,
				autoplay:false,
				loading:false,
				reloadKey:'reload-purchase-tabbar-guid',
				salesData: {
					categories: [],
					series: []
				},
				productData:{
				  categories: [],
					series: []
				},
				menuList:
					[
					{
						name:'待确认',
						image:'static/home/icon_daifukuan.png',
						isShow:this.isSale||this.isReceive||this.isCollection,
						route:'/pages/sale/order/index?current=1',
						badge:0,
					},  
					{
						name:'待发货',
						image:'static/home/icon_daifahuo.png',
						isShow:this.isSale||this.isReceive||this.isCollection,
						route:'/pages/sale/order/index?current=2',
						badge:0,
					},
					{
						name:'待收货',
						image:'static/home/icon_daishouhuo.png',
						isShow:this.isSale||this.isReceive||this.isCollection,
						route:'/pages/sale/order/index?current=3',
						badge:0,   
					},
					{
						name:'待评价',
						image:'static/home/icon_daipingjia.png',
						isShow:this.isSale||this.isReceive||this.isCollection,
						route:'/pages/sale/order/index?current=4',
						badge:0,
					},
					{
						name:'库存管理',
						image:'static/home/icon_kucunguanli.png',
						isShow:this.isInventory,
						route:'/pages/sale/kucun/index',
						badge:0,
					},
					{
						name:'开发票',
						image:'static/home/icon_kaifapiao.png',
						isShow:this.isCollection,
						route:'/pages/sale/invoiceOrder/index',
						badge:0,
					},
					{
						name:'售后',
						image:'static/home/icon_shouhou.png',
						isShow:this.isBuyerAfterSales,
						route:'/pages/sale/afterOrder/index',
						badge:0,
					},
					{
						name:'收款单',
						image:'static/home/icon_payorder.png',
						isShow:this.isSale||this.isCollection,
						route:'/pages/sale/payorder/index',
						badge:0,
					},
					{
						name:'我的采购商',
						image:'static/home/heyue.png',
						isShow:this.isManageAgreement,
						route:'/pages/sale/saleContract/index',
						badge:0,
					},
					{
						name:'我的客户',
						image:'static/home/wodekehu.png',
						isShow:this.isAgreement,
						route:'/pages/sale/myCustomers/index',
						badge:0,
					},
					{
						name:'分类',
						image:'static/home/class.png',
						isShow:this.isCategory,
						route:'/pages/sale/classManger/index?type=Seller',
						badge:0,
					},
					{
						name:'价格模板',
						image:'static/home/jiage.png',
						isShow:this.isManageAgreement,
						route:'/pages/sale/priceTemplate/index?type=Seller',
						badge:0,
					},
					{
						name:'首页设置',
						image:'static/home/homeconfig.png',
						isShow:this.isSellerHomePage,
						route:'/pages/sale/homePageConfig/index',
						badge:0,
					},
					{
						name:'销售报表',
						image:'static/home/report.png',
						isShow:this.isSellerReport,
						route:'/pages/sale/report/index',
						badge:0,
					},
				],
				current:0
			}
		},
		async onShow() {
			// 获取角标
			await this.getBadgeQuantity();

		},
		async onLoad() {
			uni.hideTabBar()
			this.menuList[0].isShow = this.isSale||this.isSendOut||this.isCollection;
			this.menuList[1].isShow = this.isSale||this.isSendOut||this.isCollection;
			this.menuList[2].isShow = this.isSale||this.isSendOut||this.isCollection;
			this.menuList[3].isShow = this.isSale||this.isSendOut||this.isCollection;
			this.menuList[4].isShow = this.isInventory;
			this.menuList[5].isShow = this.isCollection;
			this.menuList[6].isShow = this.isSellerAfterSales;
			this.menuList[7].isShow = this.isSale||this.isCollection;
			this.menuList[8].isShow = this.isManageAgreement;
			this.menuList[9].isShow = this.isAgreement;
			this.menuList[10].isShow = this.isCategory;
			this.menuList[11].isShow = this.isManageAgreement;
			this.menuList[12].isShow = this.isSellerHomePage;
			this.menuList[13].isShow = this.isSellerReport;
			// 获取销售额月度走势
			await this.monthlySalesTrend()
			// 获取单品销量
			await this.monthlyTrendOfMainItems()
		},
		computed:{
			showMenuList:function(){
				return this.menuList.filter(item=>{
					return item.isShow
				})
			},
			...mapState(useUserStore,['isInventory','isSale','isSendOut','isCollection','isCollection','isSellerAfterSales','isManageAgreement','isAgreement','isCategory','isSellerHomePage','isSellerReport']),
			...mapState(useShopStore, {
				  storeShop: 'shop'}),
		},
		methods: {
			clickTabs(index) {
				if(index == 0){
					this.monthlySalesTrend();
				}else{
					this.monthlyTrendOfMainItems();
				}
				this.current = index;
			},
			// 获取月度走势
			async monthlySalesTrend() {
				let params = {
					today:this.$u.timeFormat(new Date(),'yyyy-mm-dd')
				}
				const res = await this.$http.get('api/v1.2/Chart/GetSellerMonthlySalesAmount', { params: params })
				this.salesData = res;
			},
			// 获取单品销量
			async monthlyTrendOfMainItems() {
				let params = {
					today:this.$u.timeFormat(new Date(),'yyyy-mm-dd')
				}
				const res = await this.$http.get('api/v1.2/Chart/GetSellerMonthlySalesItemCount', { params: params })
				this.productData = res;
			},
			goBlacncePage(){
				if(!(this.isSale||this.isCollection)){
					return this.$u.toast('当前账号没有查看账户余额的权限，请联系管理员处理~');
				}
				this.$mRouter.push({ route: '/pages/purchase/zhanghu/redpackage?balance=' + this.balance })
			},
			// 获取余额
			async getShopAccount() {
				const res = await this.$http.post('api/AccountBook/GetTotalBlance')
				if (!res) return this.balance = 0
				this.balance = res;
				this.$nextTick(()=>{
					// this.$refs.uCountTo.start()
				})
			},
			// 获取订单角标
			async getBadgeQuantity() {
				const res = await this.$http.get('api/Trade/GetStateQuantity', { params: { shopId: this.storeShop.id, isBuyerShop: false }})
				this.badgeQuantity = res
				this.menuList[0].badge = res.pendingPaymentQuantity;
				this.menuList[1].badge = res.toBeShippedQuantity;
				this.menuList[2].badge = res.pendingReceiptQuantity;
				this.menuList[3].badge = res.toBeEvaluatedQuantity;
				this.menuList[5].badge = res.invoiceQuantity;
				this.menuList[6].badge = res.afterSaleQuantity;
				this.menuList[7].badge = res.paymentQuantity;
			},
			toPage(page, index) {
				this.$mRouter.push({ route: '/pages/sale/order/index?tab='+index })
			}
		}
	}
</script>

<style lang="scss" scoped>
	.chart {
		// height: 440rpx;
		background-color: #FFFFFF;
		.chart-header {
			display: flex;
			justify-content: space-around;
			.tabs {
				color: #999999;
				padding: 10rpx 22rpx;
				font-size: 30rpx;
				border: 1px solid #FFFFFF;
				border-radius: 50rpx;
			}
			.active {
				color: $uni-text-color;
				border: 2rpx solid;
			}
		}
	}
	.content {
		text-align: center;
		background-color: #FFFFFF;
		padding-bottom: 50rpx;
		.store {
			.name {
				font-size: 32rpx;
				font-weight: bold;
			}
			.tag {
				// width: 110rpx;
				line-height: 30rpx;
				height: 100%;
				padding: 5rpx 10rpx;
				border: 1px solid $theme-color;
				border-radius: 15rpx;
				margin-left: 10rpx;
				color: $theme-color;
				font-size: 18rpx;
			}
		}
		.tag {
			// width: 110rpx;
			padding: 5rpx 15rpx;
			border: 1px solid $theme-color;
			border-radius: 15rpx;
			color: $theme-color;
			font-size: 18rpx;
		}
	} 
	.footer {
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.sale-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		// margin-bottom: 50rpx;
	}
	.sale-icons {
		display: flex;
		justify-content: space-around;
		align-items: center;
	}
	// 下拉菜单样式修改
	::v-deep .u-dropdown__menu__item__text {
		font-weight: bold;
	}
	.menu-item{
		display: flex;
		width:25%; 
		flex-direction: column;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 40rpx;
		.menu-item-image{
			text-align: center;
			position: relative;
			width: 100%;
		}
		.menu-item-text{
			font-size: 28rpx;
			color:#333333;
			margin-top: 24rpx;
		}
	}
</style>
 